<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
let email = ref()
let password = ref()
let isRemember = ref(false)

const fillPassword = () => {
  if (email.value && localStorage.getItem(email.value)) {
    password.value = localStorage.getItem(email.value)
    isRemember.value = true
  }
}

const login = () => {
  if (email.value === '2528591821@qq.com' && password.value === '123456') {
    localStorage.setItem('isAuthenticated', 'true')
    if (isRemember.value) {
      localStorage.setItem(email.value, password.value)
    }
    router.push('/')
  } else {
    ElMessage.error('邮箱或密码错误')
    return false
  }
}
</script>

<template>
  <!DOCTYPE html>
  <head>
    <!--    <title>Gadget Sign Up Form a Flat Responsive Widget Template :: w3layouts </title>-->
    <!-- Meta tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--    <meta name="keywords" content="Gadget Sign Up Form Responsive Widget, Audio and Video players, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up Web Templates, Flat Web Templates, Login Sign-up Responsive Web Template, Smartphone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design"/>-->
    <!-- Meta tags -->
    <!-- font-awesome icons -->
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <!-- //font-awesome icons -->
    <!--stylesheets-->
    <link href="../assets/css/login.css" rel='stylesheet' type='text/css' media="all">
    <!--    &lt;!&ndash;//style sheet end here&ndash;&gt;-->
    <link href="//fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
  </head>
  <body>
  <h1 class="error">Wind chime</h1>
  <!---728x90--->
  <div class="w3layouts-two-grids">
    <!---728x90--->
    <div class="mid-class">
      <div class="img-right-side">
        <h3>Manage Your Wind chime Account</h3>
        <p>Wind Chime is a highly customized timing message push tool that is compatible with different calendars such
          as the Gregorian calendar and the lunar calendar</p>

        <!--        <h3>管理你的风铃账户</h3>-->
        <!--        <p>风铃是一款兼容公历和农历等不同历法且支持高度定制的定时消息推送工具</p>-->
        <img src="../assets/images/b11.png" class="img-fluid" alt="">
      </div>
      <div class="txt-left-side">
        <h2> Sign In Here </h2>
        <form action="#" method="post">
          <div class="form-left-to-w3l">
            <span class="fa fa-envelope-o" aria-hidden="true"></span>
            <input v-model="email" type="email" name="email" placeholder="Email" @blur="fillPassword">
            <div class="clear"></div>
          </div>
          <div class="form-left-to-w3l ">

            <span class="fa fa-lock" aria-hidden="true"></span>
            <input v-model="password" type="password" name="password" placeholder="Password">
            <div class="clear"></div>
          </div>
          <div class="main-two-w3ls">
            <div class="left-side-forget">
              <input type="checkbox" class="checked"  v-model ="isRemember">
              <span class="remenber-me">Remember me </span>
            </div>
            <div class="right-side-forget">
              <a href="#" class="for">Forgot password...?</a>
            </div>
          </div>
          <div class="btnn">
            <button @click.prevent="login" type="submit">Sign Up</button>
          </div>
        </form>
        <div class="w3layouts_more-buttn">
          <h3>Don't Have an account..?
            <router-link :to="{name:'register'}">Sign Up</router-link>
            <!--            <a href="#"></a>-->
          </h3>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
  <!---728x90--->
  <!--  <footer class="copyrigh-wthree">-->
  <!--    <p>-->
  <!--      © 2019 Gadget Sign Up Form. All Rights Reserved | Design by-->
  <!--      <a href="http://www.W3Layouts.com" target="_blank">W3Layouts</a>-->
  <!--    </p>-->
  <!--  </footer>-->
  </body>

</template>
<style scoped>
@import "../assets/css/login.css";
@import "../assets/css/font-awesome.min.css";

.txt-left-side {
  flex-basis: 35%;
  -webkit-flex-basis: 35%;
  box-sizing: border-box;
  text-align: center;
  background: #fff;
  box-shadow: 0px 0px 10px 1px #cccccc;
  max-height: 500px;
}
</style>